<template>
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
         <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
         <el-breadcrumb-item>演员管理</el-breadcrumb-item>
         <el-breadcrumb-item>演员列表</el-breadcrumb-item>
     </el-breadcrumb>
     <el-divider></el-divider>
     <!-- 搜索表单 -->
     <el-form :inline='true' :model="searchForm" class="demo-form-inline">
        <el-form-item label="姓名">
            <el-input v-model="searchForm.actorName" placeholder="请输入演员姓名"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSearch">查询</el-button>
        </el-form-item>
     </el-form>
     <el-divider content-position="left">演员列表</el-divider>
     <personltem 
     v-for="value in actorList"
     :key="value.id"
     :name="value.actor_name" 
     :src='value.actor_avatar'
     @delete='ondelete(value.id)'
     ></personltem>
    </div>
</template>

<script>
import Personltem from '@/components/Personltem.vue'
import httpApis from '../../http/index'
    export default {
  components: { Personltem },
        data() {
            return {
                actorList:'',//绑定演员列表
                searchForm:{
                    actorName:'',//绑定演员名字
                }
            }
        },
        
        methods: {
            //监听子组件删除成功自动更新列表
          ondelete(id){
          const h = this.$createElement;
          this.$msgbox({
          title: '删除演员',
          message: h('p', null, [
            h('span', null, '确认要删除该演员吗？ '),
            h('i', { style: 'color: teal' })
          ]),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = '正在删除...';
              setTimeout(() => {
                done();
                setTimeout(() => {
                  instance.confirmButtonLoading = false;
                }, 300);
              }, 800);
            } else {
              done();
            }
          }
        }).then(action => {
            this.$http.actorApi.delete({id:id}).then(res => {
                if(res.data.code == 200){
                    this.$message({
                      type: 'success',
                       message:'删除成功', 
                 });   
                  this.loadActorLIst() 
                }
            })    
        }).catch(() => {
            this.$message({
            type: 'info',
            message: '已取消删除'
          });   
        })
            },
          //点击查询执行  
            onSearch() {
                if(!this.searchForm.actorName.trim()){
                    this.loadActorLIst()
                }else{
                this.$http.actorApi.Search({name:this.searchForm.actorName}).then(result => {
                    console.log(result)
                    this.actorList = result.data.data
                })}
            },
            /**
             * 加载演员列表
             */
            loadActorLIst(){
                this.$http.actorApi.list({page:1,pagesize:100}).then((result) => {
                    console.log(result)
                    if(result.data.code == 200 ){
                        this.actorList = result.data.data
                    }
                })
            }
        },
        //挂在完毕后执行的生命周期
        mounted(){
          this.loadActorLIst()
        }
    }
</script>

<style lang="less" scoped>
  
</style>